---
title: marquee 通过CSS实现滚动效果
date: 2023-01-14 20:10:43
images: ['https://img1.baidu.com/it/u=1769826650,2758462916&fm=253&fmt=auto&app=138&f=JPEG?w=891&h=500']
summary: '&lt;marquee&gt; 是 HTML 中的一个标签，用于创建滚动文本或图像的效果。它可以让内容在页面上水平或垂直滚动。不过需要注意的是，&lt;marquee&gt; 标签已经过时，并且在 HTML5 中被废弃。现代网页开发中，通常使用 CSS 或 JavaScript 来实现类似的效果。'
tags: 
 - web
---

#### 取代marquee标签方法
```html
<div id=demo style=overflow:hidden;height:70;width:400>
 <div id=demo1>
      <a href='' target='_blank'>这是滚动第1行</a><br>
      这是滚动第2行<br>
      这是滚动第3行<br>
      这是滚动第4行<br>
      这是滚动第5行<br>
      这是滚动第6行<br>
      这是滚动第7行<br>
      这是滚动第8行<br>
    </div>
 <div id=demo2></div>
</div>
```
```javascript
var speed = 30
demo2.innerHTML = demo1.innerHTML

function Marquee() {
 if (demo2.offsetTop - demo.scrollTop <= 0)
  demo.scrollTop -= demo1.offsetHeight
 else {
  demo.scrollTop++
 }
}
var MyMar = setInterval(Marquee, speed)
demo.onmouseover = function () {
 clearInterval(MyMar)
}
demo.onmouseout = function () {
 MyMar = setInterval(Marquee, speed)
}

```
**css方式**
```html
<div class="box">
 <p class="animate">
  文字滚动的内容
 </p>
</div>
```
```css
.box {
 width: 300px;
 margin: 0 auto;
 border: 1px solid #ff6700;
 overflow: hidden;
}

.animate {
 padding-left: 20px;
 font-size: 12px;
 color: #000;
 display: inline-block;
 white-space: nowrap;
 animation: 10s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
 0% {
  transform: translateX(200px);
  -webkit-transform: translateX(200px);
 }
 100% {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
 }
}

@-webkit-keyframes wordsLoop {
 0% {
  transform: translateX(200px);
  -webkit-transform: translateX(200px);
 }
 100% {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
 }
}
```
